<%@page language="java" import="java.sql.*" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<fmt:setBundle basename="messages.offline"/>
<%
Integer userId=(Integer)request.getSession(false).getAttribute("id");
dbBean.DBConnectionManager connMgr=(dbBean.DBConnectionManager)application.getAttribute("connMgr");
if((userId==null) || (connMgr==null)) {
  application.log("- No existe una sesion de usuario o no se ha podido obtener una conexion con la BBDD");
%>
<html>
  <body onLoad="parent.location.href='/';">
  </body>
</html>
<%
} else {
String desde=(String)request.getParameter("desde");
String hasta=(String)request.getParameter("hasta");

if(desde==null)
	desde="";
if(hasta==null)
	hasta="";

Timestamp desdeTs=new Timestamp(0);
Timestamp hastaTs=new Timestamp(new java.util.Date().getTime());

if(desde!="") {
  try {
    desdeTs=Timestamp.valueOf(desde);
  } catch(IllegalArgumentException e) {e.printStackTrace();}
}
if(hasta!="") {
  try {
    hastaTs=Timestamp.valueOf(hasta);
  } catch(IllegalArgumentException e) {e.printStackTrace();}
}

Connection con=null;
StringBuffer datos=new StringBuffer();
 try {
  Timestamp timestamp=null;
  application.log("- Se va a consultar la ruta en la BBDD");
  con = connMgr.getConnection("mysql");
  PreparedStatement pstmt=null;
  if((desde=="") && (hasta=="")) {
      pstmt = con.prepareStatement("SELECT timestamp, latitud, longitud, velocidad, rumbo, altitud FROM datos WHERE UserId="+userId.toString()+" ORDER BY timestamp;");
  } else {
      pstmt = con.prepareStatement("SELECT timestamp, latitud, longitud, velocidad, rumbo, altitud FROM datos WHERE UserId="+userId.toString()+" AND timestamp BETWEEN ? AND ? ORDER BY timestamp;");
      pstmt.setTimestamp(1, desdeTs);
      pstmt.setTimestamp(2, hastaTs);
  }
  ResultSet rs=pstmt.executeQuery();
  while(rs.next()) {
      datos.append("#");
      timestamp=rs.getTimestamp(1);
      datos.append(timestamp.toString());
      datos.append(";");
      datos.append(rs.getString(2));
      datos.append(";");
      datos.append(rs.getString(3));
      datos.append(";");
      datos.append(rs.getString(4));
      datos.append(";");
      datos.append(rs.getString(5));
      datos.append(";");
      datos.append(rs.getString(6));
  }
  rs.close();
  pstmt.close();
  application.log("- Se ha obtenido la ruta correctamente");

} catch (SQLException e) {
  application.log("GoogleGPS_offline_descargar.jsp",e);
}
if(con!=null)
  connMgr.freeConnection("mysql",con);
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>GPS-o&ugrave;</title>
<style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
</style>

<style type="text/css">
    .on {color:red}
    .off {color:black}
    .posinfo    {
                width: 220px;
                font-family: arial, sans-serif;
                color: #0000A0;
                font-size: 75%;
                font-stretch: narrower;
                font-weight: bold;
                text-align: left;
                }
</style>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=" type="text/javascript" charset="utf-8"></script>
<script src="http://www.gpsou.es/GoogleGPS/scripts/markermanager.js"text/javascript" charset="utf-8"></script>
<script src="http://www.gpsou.es/GoogleGPS/scripts/pano_layer.js"text/javascript" charset="utf-8"></script>
<script src="http://www.gpsou.es/GoogleGPS/scripts/pano_maptypecontrol.js"text/javascript" charset="utf-8"></script>

<script type="text/javascript">
//<![CDATA[

var http_request = false;

var map;
var gMarker=new GMarker(0, 0);
var points = [];
var gPolyline = new GPolyline([0 ,0], [0, 0]);
var time=new Date();
var ruta;
var datos="<%=datos.toString()%>";
var i=0;
var mostrarRuta=false;
var distancia=0;
var latitudAnterior;
var longitudAnterior;

var direccion=1;
var reproducir=true;
var timer;

function parseDate(str) {
  var ts=str.split(" ");
  var d=ts[0].split("-");
  var h=ts[1].split(":");
  var s=h[2].split(".");

  var fecha=new Date(Date.UTC(d[0], d[1] - 1, d[2], h[0], h[1], s[0], s[1]));

  return(fecha);
}

function load() {
    if (GBrowserIsCompatible()) {

	map = new GMap2(document.getElementById("map"));
	map.addMapType(G_SATELLITE_3D_MAP);
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(0, 0), 16);
	map.addControl(new PanoMapTypeControl());
        map.enableScrollWheelZoom();
        map.enableContinuousZoom();
	map.setMapType(G_HYBRID_MAP);

	ruta=datos.split("#");

	results=ruta[1].split(";");

        var grados;
        var latitudNMEA=results[1];
        var longitudNMEA=results[2];
        grados=Math.floor(latitudNMEA/1000000);
        if(grados<0)
            grados=grados+1;
        latitudAnterior=(latitudNMEA/1000000-grados)/0.6+grados;
        grados=Math.floor(longitudNMEA/1000000);
        if(grados<0)
            grados=grados+1;
        longitudAnterior=(longitudNMEA/1000000-grados)/0.6+grados;

	mueve();

    }
}

function mueve() {

    try {

      i=i+direccion;
      if(i<1)
	i=1;
      if(i>ruta.length-1)
	i=ruta.length-1;

      results=ruta[i].split(";");

      var grados;
      var latitudNMEA=results[1];
      var longitudNMEA=results[2];


      grados=Math.floor(latitudNMEA/1000000);
      if(grados<0)
	grados=grados+1;
      var latitud=(latitudNMEA/1000000-grados)/0.6+grados;
      grados=Math.floor(longitudNMEA/1000000);
      if(grados<0)
	grados=grados+1;
      var longitud=(longitudNMEA/1000000-grados)/0.6+grados;

      var dx=6370*(latitud-latitudAnterior)*Math.PI/180;
      var dy=6370*Math.cos(latitud*Math.PI/180)*(longitud-longitudAnterior)*Math.PI/180;
      distancia+=direccion*Math.sqrt(Math.pow(dx,2)+Math.pow(dy,2));
      latitudAnterior=latitud;
      longitudAnterior=longitud;

      var point = new GLatLng(latitud, longitud);
      if(points.length>=1000)
	points.shift();
      points.push(point);

      if(mostrarRuta) {
	map.removeOverlay(gPolyline);
	gPolyline=new GPolyline(points);
	map.addOverlay(gPolyline);
      }

      map.removeOverlay(gMarker);
      gMarker=new GMarker(point, null);
      map.addOverlay(gMarker);

      var fecha=parseDate(results[0]);
      var velocidad=Math.round(results[3] / 10);
      var altitud=results[5];

      if(fecha.getTime() != time.getTime()) {
        map.panTo(new GLatLng(latitud, longitud));
        time = fecha;
      }

      document.getElementById("fecha").innerHTML=fecha.toLocaleDateString();
      document.getElementById("hora").innerHTML=fecha.toLocaleTimeString();
      document.getElementById("velocidad").innerHTML=velocidad + " km/h";
      document.getElementById("distancia").innerHTML=Math.round(distancia*1000)/1000 + " km";
      document.getElementById("altitud").innerHTML=altitud + " m";

      
    
    } catch (err) {alert(err.description);}
    if(reproducir==true)
      timer=window.setTimeout("mueve();", 1000);

}

function back() {
    direccion=-1;
    document.getElementById("forwardBtn").className="off";
    document.getElementById("backBtn").className="on";
}


function play(boton) {
  if(reproducir) {
    boton.value="play";
    boton.title="Continuar reproduciendo el recorrido";
    document.getElementById("stepBtn").style.visibility="visible";
    reproducir=false;
    clearTimeout(timer);
  } else {
    boton.value="stop";
    boton.title="Hacer una pausa";
    document.getElementById("stepBtn").style.visibility="hidden";
    reproducir=true;
    mueve();
  }
}

function forward() {
    direccion=1;
    document.getElementById("forwardBtn").className="on";
    document.getElementById("backBtn").className="off";
}

function step() {
    if(reproducir==false)
      mueve();
}

function fReset() {
    distancia=0;
    document.getElementById("distancia").innerHTML="0 km";

}

function fMostrarRuta(boton) {
    if(mostrarRuta) {
      map.removeOverlay(gPolyline);
      boton.value="<fmt:message key="button.route.1"/>";
      boton.title="<fmt:message key="button.route.title.1"/>";
      mostrarRuta=false;
    } else {
      gPolyline=new GPolyline(points);
      map.addOverlay(gPolyline);
      boton.value="<fmt:message key="button.route.2"/>";
      boton.title="<fmt:message key="button.route.title.2"/>";
      mostrarRuta=true;
    }
}


//]]>
</script>

</head>

<body onload="load()" onunload="GUnload()">
  <p style="text-align: center"><img src="http://www.gpsou.es/VEGPS/html/images/GPSou-logo-banner.png" alt="GPSou"></p>

  <div style="text-align: center">
  <table style="margin-left: auto; margin-right: auto">
  <tr><td>
  <div id="map" style="width: 500px; height: 300px; border: thick groove #A0A0FF"></div>

    <input type="button" name="back" id="backBtn" title="<fmt:message key="button.back.title"/>" class="off" value="<fmt:message key="button.back"/>" onClick="back();">
    <input type="button" name="play" id="playBtn" title="<fmt:message key="button.play.title.1"/>" value="<fmt:message key="button.play.1"/>" onClick="play(this);">
    <input type="button" name="forward" id="forwardBtn" title="<fmt:message key="button.forward.title"/>" class="on" value="<fmt:message key="button.forward"/>" onClick="forward();">&nbsp; &nbsp; &nbsp;
    <input type="button" name="step" id="stepBtn" title="<fmt:message key="button.step.title"/>" value="<fmt:message key="button.step"/>" onClick="step();" style="visibility: hidden"> <br>
    <input type="button" name="mostrarRuta" id="mostrarRutaBtn" title="<fmt:message key="button.route.title.1"/>" value="<fmt:message key="button.route.1"/>" onClick="fMostrarRuta(this);">
  </td>

  <td valign="top">
    <form name="datos" action="null">
        <p><fmt:message key="data.text"/><br>
	</p>
	<table>
	<tr><td><fmt:message key="data.date"/> </td><td class="posinfo"><span id="fecha" title="<fmt:message key="data.date.title"/>"> </span></td></tr>
	<tr><td><fmt:message key="data.time"/> </td><td class="posinfo"><span id="hora" title="<fmt:message key="data.time.title"/>"> </span></td></tr>
	<tr><td><fmt:message key="data.speed"/> </td><td class="posinfo"><span id="velocidad" title="<fmt:message key="data.speed.title"/>"> </span></td></tr>
	<tr><td><fmt:message key="data.altitude"/> </td><td class="posinfo"><span id="altitud" title="<fmt:message key="data.altitude.title"/>"> </span></td></tr>
        <tr><td><fmt:message key="data.distance"/> </td><td class="posinfo"><span id="distancia" title="<fmt:message key="data.distance.title"/>"> </span></td></tr>
	<tr><td></td><td style="text-align: left"><input type="button" name="reset" title="<fmt:message key="button.reset.title"/>" value="<fmt:message key="button.reset"/>" onClick="fReset();"></td></tr>
	</table>
    </form>
  </td></tr>
  </table>

  <p>
    <img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88">
  </p>
  </div>
</body>

</html>
<%
}
%>
